<!DOCTYPE html>
<html lang="en">
<head>
  <title>学习浏览器本地存储</title>
</head>
<body>
  <h1>LocalStorage</h1>
  <button onclick="setData()">点我保存数据</button>
  <button onclick="getData()">点我读取数据</button>
  <button onclick="delData()">点我删除数据</button>
  <button onclick="clearAll()">点我清空全部数据</button>
</body>
<script type="text/javascript">
  let p = {name:'张三',age:18}
  function setData(){
    localStorage.setItem('msg','hello')
    localStorage.setItem('msg','Hi!')   //会覆盖上一个msg
    localStorage.setItem('msg2',JSON.stringify(p))
  }
  function getData(){
    console.log (localStorage.getItem('msg'))
    console.log (localStorage.getItem('msg2'))
  }
  function delData(){
    localStorage.removeItem('msg')
    localStorage.removeItem('msg2')
  }
  function clearAll(){
    localStorage.clear()
  }
</script>
</html>